let layer = layui.layer
let form = layui.form
let laypage = layui.laypage;


// 发请求，由于参数比较多，每次ajax请求都要带上这些参数，很繁琐
// 处理
// 把参数放到一个对象，方便复用
let query = {
  pagenum: 1,   //是	int	    页码值
  pagesize: 2,  //是	int	    每页显示多少条数据
  cate_id: '',  //否	string	文章分类的 Id
  state: '',    //否	string	文章的状态，可选值有：已发布、草稿'
}
//  渲染
getList()
function getList() {

  axios.get('/my/article/list', { params: query }).then(({ data: { data, total } }) => {
    // console.log(res)
    $('#list').html(data.map(({ cate_name, title, pub_date, state, Id }) => {
      return `
    <tr>
       <td>${title}</td>
       <td>${cate_name}</td>
       <td>${pub_date}</td>
       <td>${state}</td>
       <td>
         <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${Id}">编辑</button>
         <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete" data-id="${Id}">删除</button>
       </td>
    </tr>`
    }).join(''))

    // 处理分页效果
    renderPage(total)
  })
}

// 渲染下拉框 
// 获取分类列表数据=>填充到分类的下拉框中

axios.get('/my/article/cates').then(({ data: { data } }) => {
  // console.log(res)
  $('#cateSelect').append(data.map(({ name, Id }) =>
    `<option value="${Id}">${name}</option>`
  ).join(''))

  form.render('select')//刷新select选择框渲染
})


// 筛选表单
$('#form').on('submit', (e) => {
  e.preventDefault()
  query.cate_id = $('#cateSelect').val()
  query.state = $('#stateSelect').val()
  // 每次筛选从第一页开始
  query.pagenum = 1
  getList()
})


// 分页功能
function renderPage(total) {
  laypage.render({
    elem: 'page-box', //注意，这里的 test1 是 ID，不用加 # 号
    count: total, //数据总数，从服务端得到\
    limit: query.pagesize, // 每条数据
    limits: [1, 2, 3, 5, 8, 10], // 每条选择项
    curr: query.pagenum, // 起始页
    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'], //自定义排版

    jump: function (obj, first) {
      //obj包含了当前分页的所有参数，比如：
      // console.log(obj.curr)  //得到当前页，以便向服务端请求对应页的数据。
      // console.log(obj.limit) //得到每页显示的条数
      query.pagenum = obj.curr
      query.pagesize = obj.limit

      //首次不执行 ==>点击切换的时候执行，发请求
      if (!first) {
        //do something
        // if成立说明first的值是undefined,是分页切换触发的jump
        getList()
      }
    }
  })

}


// 删除功能
$('#list').on('click', '.btn_delete', function () {
  let id = $(this).attr('data-id')

  layer.confirm('确认删除文章吗?',
    { icon: 3, title: '提示' },
    function (index) {
      //do something
      axios.get(`/my/article/delete/${id}`).then(({ data: { status, message } }) => {
        // console.log(res)
        if (status !== 0) {
          return layer.msg(message)
        }
        // 删除成功
        // 当这一页的删除按钮的个数为一个的时候，表示这一条数据删除之后，这一页将没有了数据，就需要展示上一个
        // if ($('.btn_delete') === 1) {
        //   query.pagenum = 1
        // } else {
        //   query.pagenum = query.pagenum - 1
        // }
        // 三元写法
        if ($('.btn_delete').length === 1) {
          query.pagenum = query.pagenum === 1 ? 1 : query.pagenum - 1
        }


        layer.msg(message)
        // 关闭弹框
        layer.close(index)
        // 重新渲染
        getList()
      })

    })
})


// 编辑功能
$('#list').on('click', '.btn_edit', function () {
  let id = $(this).attr('data-id')
  location.href = `/article/art_edit.html?id=${id}`
})